<template>
  <div id="particles-js">
    <div class="login">
      <Row class="vm-login vm-panel">
        <i-col span="14" class="login-ad">
          <span class="photo-author"></span>
        </i-col>
        <i-col span="10" class="login-form">
          <div class="login-header">
            <img src="../assets/logo.png" height="80" alt="">
            <p><span>WeiShop</span></p>
          </div>
          <div class="login-form">
            <Form ref="formCustom" :model="formCustom" class="login-container" :ref="formName">
              <Input v-model="formCustom.username" placeholder="请输入登录账号" :maxlength="20"></Input>
              <Input v-model="formCustom.password" type="password" placeholder="请输入密码" :maxlength="30"></Input>
              <Row type="flex" justify="space-between">
                <i-col span="16">
                  <i-input type="text" @on-enter="handleSubmit('formCustom')" v-model="formCustom.captcha" :maxlength="4"
                           placeholder="请输入验证码" ></i-input>
                </i-col>
                <i-col span="8">
                  <img :src="captchaUrl" @click="changeCaptchaUrl" width="100%" height="45px" style="border-radius: 4px"/>
                </i-col>
              </Row>
              <Button type="primary" @click="handleSubmit('formCustom')" :loading="loading">登录</Button>
            </Form>
          </div>
          <div class="login-footer">
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>

  import '../utils/particles.min'
  import '../styles/login.less'
  import axios from "axios";

  export default {
    data() {
      return {
        formName: 'formName',
        //提交按钮loading
        loading: false,
        //登录form
        formCustom: {
          username: null,
          password: null,
          captcha: null
        },
        now: new Date(),
      }
    },
    methods: {
      //刷新验证码
      changeCaptchaUrl: function () {
        this.now = new Date();
      },
      //确认登录操作
      handleSubmit(name) {
        if (!this.formCustom.username||this.formCustom.username == "") {
          this.$Notice.error({
            title: "消息提示",
            desc: "账号不能为空"
          });
          return;
        }
        if (!this.formCustom.password||this.formCustom.password == "") {
          this.$Notice.error({
            title: "消息提示",
            desc: "密码不能为空"
          });
          return;
        }
        if (!this.formCustom.captcha||this.formCustom.captcha == "") {
          this.$Notice.error({
            title: "消息提示",
            desc: "验证码不能为空"
          });
          return;
        }
        this.loading = true;
        this.$axios.post("/login", this.formCustom).then(response => {
          sessionStorage.setItem("userName", this.formCustom.username);
          this.$Message.success("登录成功");
          this.$router.replace("/");
          this.loading = false;
        }, (response) => {
          this.$Message.error(response.message);
          this.changeCaptchaUrl();
          this.loading = false;
        });
      }
    },
    computed: {
      captchaUrl: function () {
        return process.env.CONTEXT + "/public/captcha?time=" + this.now;
      }
    }, mounted() {
      particlesJS("particles-js", {
        "particles": {
          "number": {
            "value": 100,
            "density": {
              "enable": true,
              "value_area": 1000
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
            "image": {
              "src": "img/github.svg",
              "width": 100,
              "height": 100
            }
          },
          "opacity": {
            "value": 0.5,
            "random": false,
            "anim": {
              "enable": false,
              "speed": 1,
              "opacity_min": 0.1,
              "sync": false
            }
          },
          "size": {
            "value": 3,
            "random": true,
            "anim": {
              "enable": false,
              "speed": 40,
              "size_min": 0.1,
              "sync": false
            }
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
              "enable": false,
              "rotateX": 600,
              "rotateY": 1200
            }
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "grab"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 140,
              "line_linked": {
                "opacity": 1
              }
            },
            "bubble": {
              "distance": 400,
              "size": 40,
              "duration": 2,
              "opacity": 8,
              "speed": 3
            },
            "repulse": {
              "distance": 200,
              "duration": 0.4
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true
      });
    }
  }
</script>
<style>
  .login .ivu-btn-primary {
    color: #fff;
    background-color: #41b883;
    border-color: #41b883;
  }

  .login .ivu-btn-primary:hover {
    color: #ffffff;
    background-color: #5ed19e;
    border-color: #5ed19e;
  }

  .login. ivu-btn {
    letter-spacing: 8px;
    font-size: 13px;
  }

  body {
    margin: 0;
    font: normal 75% Arial, Helvetica, sans-serif;
  }

  canvas {
    display: block;
    vertical-align: bottom;
  }

  /* ---- particles.js container ---- */

  #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #152935;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
  }

  /* ---- stats.js ---- */

  .count-particles {
    background: #000022;
    position: absolute;
    top: 48px;
    left: 0;
    width: 80px;
    color: #13E8E9;
    font-size: .8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
  }

  .js-count-particles {
    font-size: 1.1em;
  }

  #stats,
  .count-particles {
    -webkit-user-select: none;
  }

  #stats {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
  }

  .count-particles {
    border-radius: 0 0 3px 3px;
  }
</style>
